<template>
	<view class="pd pt20">
		<view class="display-flex">
			<view class="flex-1">
				<view class="jmxczdrf br fz26 ls vertical-center tl pd pr">
					<!-- 全部省 -->
					<view class="">
						<text v-if="kmxcfa">{{kmxcfa}}</text>
						<text v-if="kmxcfb">/ {{kmxcfb}}</text>
						<text v-if="kmxcfc">/ {{kmxcfc}}</text>
					</view>
					<icon class="iconfont icon-close1 z9 kxzczxrfezxr"></icon>
				</view>
			</view>
			<view class="ml20">
				<button type="primary" size="mini" class=" fgdxcvtr" @tap="skmxs">确定</button>
			</view>
		</view>
		<view class="display-flex fdfxczretrt  fz26">
			<view class="flex-1 brm pd">
				<view class="xczxerxetrt">
					<view class="pt10 pm10 pr" :class="claxzckssa?'ls':''" @tap="kcxxzdfta">
						全部省 <icon class="iconfont icon-rightyou jmxczxrerxr"></icon>
					</view>
					<view class="pt10 pm10 pr dian" :class="sd.cls?'ls':''" 
					v-for="sd in kmxzcf" @tap="kkzxdrf(sd)">
						{{sd.label}}
						<icon class="iconfont icon-rightyou jmxczxrerxr"></icon>
					</view>
				</view>
			</view>
			<view class="flex-1 brm pd">
					<view class="xczxerxetrt">
				<view class="pt10 pm10 pr" :class="claxzckssb?'ls':''" v-if="kmxcfa" @tap="kcxxzdft">
					全部市 <icon class="iconfont icon-rightyou jmxczxrerxr"></icon>
				</view>
				<view class="pt10 pm10 pr" :class="sd.cls?'ls':''" v-for="sd in shilist" @tap="kmmxssfd(sd,shilist)">
					{{sd.label}}
					<icon class="iconfont icon-rightyou jmxczxrerxr"></icon>
				</view>
				</view>
			</view>
			<view class="flex-1  pd">
					<view class="xczxerxetrt">
				<view class="pt10 pm10 pr" v-if="kmxcfb" :class="claxzckssc?'ls':''" @tap="kcxxzdftc">
					全部区
					<icon class="iconfont icon-gouxuan jmxczxrerxr" v-if="claxzckssc"></icon>
				</view>
				<view class="pt10 pm10 pr" @tap="kmmxssfc(sd,qulist)" :class="sd.cls?'ls':''" v-for="sd in qulist">
					{{sd.label}}
					<icon class="iconfont icon-gouxuan jmxczxrerxr" v-if="sd.cls"></icon>
				</view>
				</view>

			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from "vue"
	import { dxrequest, dxrequestht } from "../util";
	const emit = defineEmits([
		'close',
		'success'
	]);
	const lkjxs = ref()
	const shilist = ref([])
	const qulist = ref([])
	const claxzckssa = ref("act")
	const claxzckssb = ref()
	const claxzckssc = ref()
	const kmxcfa = ref("全部省")
	const kmxcfb = ref()
	const kmxcfc = ref()
	lkjxs.value = []
	const kmxzcf = ref([])
	const kkzxdrf = async(data) => {
		
		const resdf = await dxrequestht("https://duxinggj.com/public/area",{
			code:data.value,
			type:1
		})
		kmxzcf.value.map(a=>{
			a.cls=""
		})
		resdf.data.map(a=>{
			a.cls=""
		})
	
		shilist.value.map(a => {
			a.cls = ""
		})
		shilist.value = resdf.data
		qulist.value = []
		 data.cls = "act"
		 claxzckssa.value = ""
		 kmxcfa.value = data.label
		 kmxcfb.value = ""
		 kmxcfc.value = ""
	}
	const kmmxssfd =async (data, list) => {
		const resdf = await dxrequestht("https://duxinggj.com/public/area",{
			code:data.value,
			type:2
		})
		resdf.data.map(a=>{
			a.cls=""
		})
		qulist.value = resdf.data
		list.map(a => {
			a.cls = ""
		})
		data.cls = "act"
		kmxcfb.value = data.label
		kmxcfc.value = ""
		claxzckssb.value = ""
		claxzckssc.value = ""
	}
	const kmmxssfc = (data, list) => {
		list.map(a => {
			a.cls = ""
		})
		data.cls = "act"
		kmxcfc.value = data.label
		claxzckssc.value = ""
		skmxs()
	}
	const skmxs = () => {
		let jnxs = kmxcfa.value
		if (kmxcfb.value) {
			jnxs = kmxcfa.value + "/" + kmxcfb.value
		}
		if (kmxcfc.value) {
			jnxs = kmxcfa.value + "/" + kmxcfb.value + "/" + kmxcfc.value
		}
		emit("success", jnxs)
	}
	const kcxxzdfta = () => {
		kmxcfa.value = "全部省"
		lkjxs.value.map(a => {
			a.cls = ""
			a.xj.map(b => {
				b.cls = ""
				b.xj.map(c => {
					c.cls = ""
				})
			})
		})
		kmxcfb.value = ""
		kmxcfc.value = ""
		claxzckssa.value = "cls"
		shilist.value = []
		qulist.value = []
	}
	const kcxxzdft = () => {
		kmxcfb.value = "全部市"
		lkjxs.value.map(a => {
			a.xj.map(b => {
				b.cls = ""
			})
		})
		claxzckssb.value = "cls"
		qulist.value = []
		kmxcfc.value = ""
	}
	const kcxxzdftc = () => {
		kmxcfc.value = "全部区"
		lkjxs.value.map(a => {
			a.xj.map(b => {
				b.xj.map(c => {
					c.cls = ""
				})
			})
		})
		claxzckssc.value = "act"
	}
	const jnmxc = async () => {
		const { data } = await dxrequestht("https://duxinggj.com/public/area")
		data.map(a=>{
			a.cls=""
		})
		kmxzcf.value = data
	}
	jnmxc()
</script>

<style scoped>
	.jmxczdrf {
		height: 74rpx;
		border-radius: 8rpx;
	}

	.kxzczxrfezxr {
		position: absolute;
		right: 20rpx;
		top: 0;
	}

	.fdfxczretrt {
		min-height: 200rpx;
	}

	.jmxczxrerxr {
		position: absolute;
		right: 0;
		top: -10rpx;
		font-size: 24rpx;
	}
	.xczxerxetrt{
		max-height: 900rpx;
		overflow: auto;
	}
</style>